<template>
    <div>
        <div v-for="(item, index) in list" :key="index" style="display: flex;padding: 15px 10px;align-content: center;align-items: center;border-radius: 5px;margin-top: 15px"
             @mouseover="item.listHover = true"
             @mouseleave="item.listHover = false"
             :class="[item.listHover?'selectedList':'']">
            <div style="flex: 2;display: flex;align-items: center">
                <el-icon :class="iconType"></el-icon>
                <div style="margin-left: 10px">
                    <div>{{ item.title }}</div>
                    <div style="font-size: 12px;color: #a6a6a6">
                        <span>{{ item.remark }}</span>
                        <el-divider direction="vertical"></el-divider>
                        <span>{{ item.operator }}</span>
                    </div>
                </div>
            </div>

            <div style="flex: 1">
                {{ item.size }}
            </div>

            <div style="flex: 1">
                <div v-if="item.listHover">
                    <el-button v-if="showDownload" type="text" @click="$emit('downloadFile', item)">下载</el-button>
                    <el-button v-if="showEdit" type="text" @click="$emit('editFile', item)">编辑</el-button>
                    <el-button v-if="showDelete" type="text" @click="$emit('deleteFile', item)">删除</el-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "file_list",
    props: {
        list: {
            type: Array,
            default () {
                return [];
            }
        },
        iconType: {
            type: String,
            default() {
                return 'el-icon-notebook-2'
            }
        },
        showEdit: {
            type: Boolean,
            default: true
        },
        showDownload: {
            type: Boolean,
            default: true
        },
        showDelete: {
            type: Boolean,
            default: true
        }
    },
    data() {
        return {
        }
    },
}
</script>

<style>
.selectedList {
    background-color: #fafafa;
}

.selectedList .el-button {
    padding: 0 !important;
}
</style>
